<template>
  <aside class="product-navbar">
    <div class="accordion-header">
<!--      <template  v-if="sideNav"><i class="icon-title dafa-icon" :class="menuTitle ? `dafa-icon-${path}` : 'el-icon-menu'"></i> {{menuTitle ? menuTitle : ' 平台管理'}}</template>-->
      <template><i class="el-icon-menu"></i> 系统管理</template>
    </div>
    <div class="accordion-list">
      <el-menu
        :default-active="currPath"
        :collapse-transition="false"
        :unique-opened="true"
        background-color="#3b404f"
        text-color="#d1d3e0"
        :router="true"
        active-text-color="#fff"
      >
        <template v-for="i in sideNav">
          <el-submenu :index="i.permissionCode" v-if="i.children.length" :key="i.permissionCode">
            <template slot="title">
              <span v-if="!noSubMenu">{{i.title}}</span>
              <router-link :to="`/${path}/${i.permissionCode}`" class="title-color" v-else>
                <span>{{i.title}} </span>
              </router-link>
              <i class="menu-icon menu-plus" :data-menu-title="i.title"></i>
            </template>
            <el-menu-item v-for="s in i.children" :index="s.permissionCode" :key="s.permissionCode">
              <router-link :to="`/${path}/${s.permissionCode}`">{{s.title}}</router-link>
            </el-menu-item>
          </el-submenu>
          <template v-else>
            <el-menu-item :index="i.permissionCode" :key="i.permissionCode" class="no-smallmenu"
            >
              <router-link :to="`/${path}/${i.permissionCode}`">{{i.title}}</router-link>
              <i class="fa fa-bars" :data-menu-title="i.title"></i>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </aside>
</template>

<script>
export default {
  name: 'SideNavSecond',
  computed: {
    sideNav () {
      const defaultSortOptions = [
        {
          permissionCode: 'member',
          title: '用户管理',
          children: [
            {
              permissionCode: 'memberAccounts',
              title: '管理员',
              children: []
            },
            {
              permissionCode: 'memberOtherAccounts',
              title: '投注用户',
              children: []
            }
          ]
        },
        {
          permissionCode: 'plan',
          title: '计划管理',
          children: [
            {
              permissionCode: 'planManage',
              title: '策略管理',
              children: []
            },
            {
              permissionCode: 'planK3',
              title: '快三任务',
              children: []
            },
            {
              permissionCode: 'planRB',
              title: '红黑任务',
              children: []
            }
          ]
        }
      ]
      return defaultSortOptions
    },
    currPath () {
      return this.$route.matched[2] ? this.$route.matched[2].path.split('/')[2] : ''
    },
    path () {
      return this.$route.matched[1].path.replace(/\//g, '')
    },
    noSubMenu () {
      if (this.path === 'report' || this.path === 'activity') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less">
  .product-navbar{
    position: fixed;
    left: 0;
    top: 50px;
    min-height: calc(100vh - 50px);
    width: 160px;
    overflow: auto;
    background: #3b404f !important;
    transition: left 0.3s, right 0.3s linear, width .3s;
    z-index: 1999;
    padding-bottom: 50px;
  }
  .el-menu--popup-right-start .el-menu-item {
    height: 40px;
    line-height: 38px;
    font-size: 12px;
    border-bottom: 1px solid #4a4f5d;
    &:last-child {
      border-bottom: none
    }
    & a{
      color: #fff;
    }
  }
  .accordion-header{
    line-height: 50px;
    text-align: left;
    font-weight: 300;
    padding-left: 20px;
    font-size: 14px;
    color: #fff;
    /*color: #c3c5d0;*/
    border-top: 1px solid #434756 !important;
    border-bottom: 1px solid #2d313c !important;
    /*border-bottom: 1px solid #3b3f59;*/
    overflow: hidden;
    height: 50px;
    transition: opacity .2s .1s;
    background: #3b404f !important;
    & > div{
      display: none;
    }
    & .el-icon-menu{
      display: inline-block;
      /*padding: 0 6px 0 0;*/
    }
    &.text-center {
      padding: 0;
      text-align: center;
      cursor: pointer;
    }
  }
  .el-submenu__title{
    background: #3b404f !important;
    /*color: #c3c5d0 !important;*/
    position: relative;
    border-top: 1px solid #4a4f5d !important;
    border-bottom: 1px solid #363b49 !important;
    line-height: 36px !important;
    height: 41px !important;
    font-weight: 300;
    & span{
      color: #fff !important;

    }
    & a {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .el-submenu__icon-arrow{
    display: none !important;
  }
  .menu-icon.fa-bars{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0 , -50%);
  }
  .menu-plus{
    &:before,&:after{
      display: block;
      position: absolute;
      right: 20px;
      content: '';
      background: #c3c5d0;
      width: 8px;
      height: 1px;
      top: 50%;
      transition: transform 0.5s, color;
    }
    &:before{
      transform: rotate(90deg);
    }
  }
  .accordion-list {
    & .el-menu{
      border-right: 0;
    }
    & .el-menu-item{
      font-size: 12px !important;
      font-weight: 300;
    }
    & .el-submenu{
      border-bottom: 1px solid #3b3f59;
      & :hover{
        & .menu-icon{
          color: var( --color-blue);
        }
        & .menu-plus{
          &:before,&:after{
            background: var( --color-blue);
          }
        }
      }
    }
    & .el-submenu.is-opened{
      border-bottom: 1px solid rgba(85, 83, 95, 0);
    }
    & .is-opened .el-submenu__title{
      & .menu-plus{
        &:before{
          transform: rotate(0deg);
        }
      }
    }
    & .el-submenu .el-menu-item{
      min-width: initial;
      border-bottom: 1px solid rgba(85, 83, 95, 1);
      background-color: #4c505f!important;
      outline: none;
      /*border-bottom: 1px solid #4c5561;*/
      height: 32px !important;
      line-height: 32px;
      position: relative;
      padding: 0 !important;
      &:before{
        content: '';
        background: #737789;
        width: 3px;
        height: 100%;
        position: absolute;
        left: 0;
      }
      & a{
        display: block;
        color: #c3c5d0;
        padding: 0 45px;
        font-weight: 300;
        outline: none;
      }
    }
    & .el-submenu .el-menu-item:last-child{
      border-bottom: none;
    }
    & .el-submenu:last-child .el-menu-item:last-child{
      border-bottom: 1px solid rgba(85, 83, 95, 1);
    }

    & .el-submenu .el-menu-item.is-active,& .el-menu-item:hover{
      & a{
        color: #fff !important;
      }
      &:before{
        background: var( --color-blue);
      }

    }
    /*& .el-menu-item.is-active ,& .el-menu-item:hover,& .el-menu-item:focus,& .el-menu-item.is-active a{*/

    /*}*/
  }
  .no-childmenu.accordion-list {
    & .el-submenu.is-opened{
      border-bottom: 1px solid #3b3f59;
      & i {
        color: var( --color-blue);
      }
    }
  }
  .icon-title{
    width: 0;
    display: inline-block !important;
    padding: 0 20px 0 0;
  }
  .dafa-icon-platform,.dafa-icon-tenant,.dafa-icon-member, .dafa-icon-transaction,.dafa-icon-activity,.dafa-icon-report{
    display: inline-block;
  }
  .no-smallmenu{
    border-top: 1px solid #4a4f5d !important;
    border-bottom: 1px solid #363b49 !important;
    height: 41px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    & a{
      color: #fff !important;
    }
    & i{
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translate(0 , -50%);
    }
    &.is-active i{
      color: var(--color-blue) !important;
    }
  }
  .dafa-icon-menu.fold-menu{
    font-size: 18px !important;
    transform:scaleX(1);
    filter:FlipH();
    display: inline-block;
  }
  .unfold{
    transform:scaleX(-1) !important;
  }
  @media only screen and (min-width: 1023px) {
    .product-navbar.pc-close {
      width: 50px;
      & .accordion-list .el-submenu :hover .menu-plus:before,
      & .accordion-list .el-submenu :hover .menu-plus:after {
        background: #fff;
        color: var(--color-blue);
      }
      & .el-submenu__title {
        height: 50px !important;
      }
      & .el-menu--collapse {
        width: 50px;
      }
      & .no-smallmenu a {
        display: none;
      }
    }
  }
  @media only screen and (min-width: 769px) {
    .el-submenu__title{
      font-size: 12px !important;}
  }
  @media only screen and (max-width: 768px) {
    .accordion-header.text-center {
      display: none;
    }
    .el-submenu__title{
      line-height: 38px !important;
      height: 42px !important;}
    .accordion-list .el-submenu .el-menu-item {
      height: 34px !important;
      line-height: 34px;
      font-size: 13px !important;
    }
    .accordion-list .el-menu-item {
      font-size: 14px !important;
    }
    .no-smallmenu {
      height: 44px;
    }
  }
  @media only screen and (max-width: 1023px) {
    .product-navbar-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      background: rgba(86, 90, 104, .4);
      visibility: hidden;
      &.is-open {
        visibility: visible;
      }
    }
    .product-navbar{
      position: absolute;
      left: initial !important;
      right: -100%;
      top: 0;
      min-height: auto;
      height: calc(100vh - 50px);
      background: #4c505d !important;
      &.is-open {
        right: 0;
      }
    }
  }
</style>
